import { message, Table, Input, Button, Popconfirm, Form, Select } from 'antd';
import { saveCityBuzzConfig, getCityBuzz, deletecityBuzzConfigByCode } from '@/services/auth';
import styles from '../components.less';
import MyTable from './MyTableCell'

class CityRelation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          width: '0'
        },
        {
          name: 'cityCode',
          title: '城市编码',
          dataIndex: 'cityCode',
          width: '30%',
        },
        {
          name: 'buzzNum',
          title: '业务编码',
          dataIndex: 'buzzNum',
          editable: true,
          type: 'select',
          optionData: []
        },
        {
          name: 'status',
          title: '业务状态',
          dataIndex: 'status',
          type: 'select',
          editable: true,
          optionData: [{ name: '已开通', value: '0' }, { name: '未开通', value: '1' }]
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (text, record, index) =>
            this.state.sourcesData.length >= 1 ? (
              <div>
                <Popconfirm title="确认要保存‘城市关联业务’信息吗?" onConfirm={() => this.saveRowsHandler(index)}>
                  <button type="primary" style={{ margin: '10px' }} >保存</button>
                </Popconfirm>
                <Popconfirm title="确认要删除‘城市关联业务’信息吗?" onConfirm={() => this.deleteHandler(index)}>
                  <button type="primary" style={{ margin: '10px' }} >删除</button>
                </Popconfirm>
              </div>
            ) : null,
        },
      ],
      sourcesData: [],
    };
    this.getSelectList();
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.sourcesdata.length !== this.state.sourcesData.length) {
      this.setState({
        sourcesData: nextProps.sourcesdata,
      })
    }
  }
  /**
   * @description 请求事件类型下拉列表数据
   * @author zlh
   * @date 2021-06-21
   * @memberof
   */
  getSelectList = async () => {
    const { columns } = this.state;
    const dataObj = await getCityBuzz();
    let baseIndex = 8;
    if (dataObj && dataObj.code === '000000') {
      if (dataObj.data !== null) {
        columns[2].optionData = dataObj.data.map(function (item) {
          return {
            name: item.cdimdc,
            value: item.cdimcode
          }
        })
        this.setState({ columns: columns });
        return true;
      }
    }
    return false;
  };
  handleAdd = () => {
    const { count, sourcesData } = this.state;
    const { cityCode } = this.props;
    const newData = {
      id: sourcesData.length + 1,
      cityCode: cityCode,
      buzzNum: '',
      status: '0',
    };
    this.setState({
      sourcesData: [newData, ...sourcesData],
    });
  };
  deleteHandler = async index => {
    const sourcesData = [...this.state.sourcesData];
    const curData = sourcesData[index];
    const responseData = await deletecityBuzzConfigByCode({ cityCode: curData.cityCode, buzzNum: curData.buzzNum });
    if (responseData && responseData.code === '000000') {
      const re = sourcesData.filter((item, i) => {
        return item.buzzNum != curData.buzzNum
      });
      this.setState({ sourcesData: re });
    } else {
      alert(responseData.message)
    }
  };
  saveRowsHandler = async index => {
    const newData = [...this.state.sourcesData];
    const item = newData[index];
    const responseData = await saveCityBuzzConfig({ cityCode: item.cityCode, buzzNum: item.buzzNum, status: String(item.status) });
    if (responseData && responseData.code === '000000') {
      message.success('操作成功');
    } else {
      alert(responseData.message)
    }
  };
  handleSave = row => {
    const newData = [...this.state.sourcesData].map((data) => {
      if (data.id === row.id) {
        data = row;
      }
      return data;
    });
    this.setState({ sourcesData: newData });
  };
  render() {
    const { sourcesData, columns } = this.state;
    const components = {
      body: {
        row: MyTable.EditableFormRow,
        cell: MyTable.EditableCell,
      },
    };
    const tempColumns = columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          type: col.type,
          name: col.name,
          optionData: col.optionData,
          handleSave: this.handleSave,
        }),
      };
    });
    return (
      <div>
        <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
          添加
        </Button>
        <Table
          className={styles['my-edittable']}
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          size="small"
          rowKey={(item, index) => index}
          dataSource={sourcesData}
          columns={tempColumns}
        />
      </div>
    );
  }
}
export default CityRelation;